<template>
	<div class="icons">
		<div class="icon" v-for="item of entries" :key="item.id">
			<div class="icon-img">
				<img class="icon-imgcontent" :src="item.imgUrl"/>
			</div>
			<p class="icon-desc">{{item.desc}}</p>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			entries: Array
		},
	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'
.icons >>> .swiper-container
	width: 100%
	height: 0
	padding-bottom: 50%
.icons
	padding-top 82px
	.icon
		position relative
		overflow hidden
		float left
		width 20%
		height 0
		padding-bottom 25%
		.icon-img
			position absolute
			top 0
			left 0
			right 0
			bottom 20px
			box-sizing border-box
			padding 2px
			.icon-imgcontent
				display block
				height 80%
				margin 0 auto
		.icon-desc
			position absolute
			bottom 0
			right 0
			left 0
			height 20px
			line-height 20px
			font-size 10px
			text-align center
			color $darktext
			ellipsis()
</style>